<template>
    <div style="height:100%;width: 100%">
        <el-row type="flex"  justify="space-around" >
            <el-col :span="9" style="margin-top: 10px">
<!--                中左的导出数据库按钮-->
                <el-card>
                    <div slot="header" >
                        <span>导出数据库</span>
                    </div>

                    <div style="width: 100%;text-align: center">
                        <el-row style="margin-bottom: 20px">
                            <div>
                                <el-input v-model="backupMysqlDataTime" disabled="">
                                    <template slot="prepend" >最近一次备份时间:</template>
                                </el-input>
                            </div>
                        </el-row>
                        <el-row style="text-align: left">
                            <el-steps :active="currentStep"  simple>
                                <el-step title="数据库文件" icon="el-icon-edit"  ></el-step>
                                <el-step title="备份" icon="el-icon-upload"  class="stepIconStyle" @click.native="backupDataSource()"></el-step>
                                <el-step title="下载" icon="el-icon-picture"  class="stepIconStyle" @click.native="downloadSqlFile()"></el-step>
                            </el-steps>
                        </el-row>

                    </div>
                </el-card>
            </el-col>
            <el-col :span="14">

            </el-col>
        </el-row>
    </div>
</template>

<script>

    import {dateFormatFun} from "@/utils/dateFormate";
    import {constants} from "@/common/constants";

    export default {
        name: "DataSetting",
        data(){
            return{
                currentStep:1  ,    //当前的步骤条
                backupMysqlDataTime: "",    //最近备份时间的毫秒时间戳
            }
        },
        mounted() {
            this.getBackupMysqlDataTime();
        },
        methods:{
            //获得备份文件的最近备份时间
            getBackupMysqlDataTime() {
                this.request.get("/index/attach/getSqlFileLastUpdateTime").then(res=>{
                    if (res.code=="200"){
                        this.backupMysqlDataTime= dateFormatFun(res.data,4);
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                        this.backupMysqlDataTime="";
                    }
                })
            },
            //备份文件
            backupDataSource() {
                this.request.get("/index/system/backup").then(res=>{
                    if (res.code=="200"){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.currentStep=2;
                        this.getBackupMysqlDataTime();
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //下载文件
            downloadSqlFile() {

                if (this.currentStep==1 ){
                    this.$message({
                        message: "请先对数据库文件进行备份",
                        type: 'error'
                    });
                }else{
                    window.open('http://'+constants.server+':'+constants.port+"/index/attach/download/sqlFile");
                    this.currentStep=3;
                }
            }

        }
    }
</script>

<style scoped>

    .stepIconStyle{
        cursor: pointer;
    }

</style>